import React, { Component } from "react";
import { Carousel, Modal, Toast } from "antd-mobile";
import { connect } from "react-redux";
import MainLayout from "@/component/mainLayout/mainLayout";
import { InterfaceG } from "@/config/Config";
import CouponItem from "./couponItem";
import Panel from "./panel";
import yhTools from "@/tools/yh";
import xhf_foot from "@images/imageXHF/xhf_foot.png";
import { saveNewPersonCoupon } from "@/Redux/Action/newPersonCoupon";
import { refresh } from "@/component/scroll/index2.jsx";
import { debounce } from "lodash";
import "./index.scss";
const logo = require("@/images/imageXHB/newPersonCoupon/logo@2x.png");
const icon1 = require("@/images/imageXHB/newPersonCoupon/juanbao@2x.png");
const icon2 = require("@/images/imageXHB/newPersonCoupon/11@2x.png");
const icon3 = require("@/images/imageXHB/newPersonCoupon/22@2x.png");
const icon4 = require("@/images/imageXHB/newPersonCoupon/33@2x.png");
const icon5 = require("@/images/imageXHB/newPersonCoupon/44@2x.png");

const couponStatus = {
	0: "继续完成",
	1: "点击领券",
	2: "领取任务",
	3: "点击领券",
	4: "领取任务"
};
//领取任务
const modalButton = {
	0: "继续完成",
	2: "领取任务",
	4: "领取任务"
};

const callPhoneData = {
	telphone: "4006906663"
};
class NewPersonCoupon extends Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			serviceVisible: false,
			limitVisible: false,
			data: {
				// activityNo: "",
				// applyStatus: "1",
				// missionStatus: "3",
				// missionTitle: "连续7天小辉宝持仓≥1千元连续7天小辉宝持仓≥1千元",
				// other: `
				// `,
				// xhbCoupons: [
				//     {
				//         activityCouponNo: "122323",
				//         couponCondition: "100",
				//         couponName: "小辉付满减券",
				//         couponValue: "10",
				//         endDate: "",
				//         other: "",
				//         startDate: "",
				//     },
				//     {
				//         activityCouponNo: "122332323223",
				//         couponCondition: "100",
				//         couponName: "小辉付满减券",
				//         couponValue: "15",
				//         endDate: "",
				//         other: "",
				//         startDate: "",
				//     },
				// ],
				// xhbMissions: [],
			}
			// isRefresh:Math.random()
		};
		// 0-未达标，1-已达标，2-任务已失效,3-已领券 4.未领取
		this.changeMissionStatus = {
			0: this.taskModal,
			1: this.sendXhbActivityCoupon,
			2: this.addXhbUserActivityMission,
			3: this.goCouponCenter,
			4: this.addXhbUserActivityMission
		};
		this.getTask = debounce(this.getTask, 1000, {
			leading: true
		});
	}

	componentDidMount() {
		this.queryCouponMission();
		this.timer = setTimeout(() => {
			// this.setState({
			//     isRefresh: Math.random()
			// });
			refresh();
		});
	}
	componentWillUnmount() {
		clearTimeout(this.timer);
		this.timer = null;
	}
	/**添加小辉宝用户活动任务 */
	addXhbUserActivityMission = async () => {
		const { activityNo } = this.state.data;
		let objs = {
			url: InterfaceG.addXhbUserActivityMission + `?activityNo=${activityNo}`,
			params: { activityNo }
		};
		try {
			// this.taskModal();
			let data = await yhTools.request(objs);
			if (data.code === "0") {
				this.taskModal();
			} else if (data.code === "1") {
				this.openLimitVisible();
			} else {
				Toast.info(data.message, 2);
			}
		} catch (error) {
			Toast.info(error, 2);
		}
		this.queryCouponMission();
	};
	/**查询领券任务 */
	queryCouponMission = async () => {
		let objs = {
			url: InterfaceG.queryCouponMission,
			params: {}
		};
		try {
			let data = await yhTools.request(objs);
			if (data.code === "0") {
				let temp = data.data || {};
				this.setState(
					{
						data: temp
						// isRefresh: Math.random(),
					},
					refresh
				);
				this.props.saveNewPersonCoupon({
					...temp,
					draw: temp.missionStatus !== "3"
				});
			} else {
				Toast.info(data.message, 2);
			}
		} catch (error) {
			Toast.info(error, 2);
		}
	};
	/**小辉宝活动任务领券 */
	sendXhbActivityCoupon = async () => {
		Toast.loading("加载中...", 1);
		const { activityNo } = this.state.data;
		let objs = {
			url: InterfaceG.sendXhbActivityCoupon + `?activityNo=${activityNo}`,
			params: { activityNo },
			_alertShow: false
		};
		try {
			let data = await yhTools.request(objs);
			if (data.code === "0") {
				this.goCouponCenter();
			} else {
				Toast.info(data.message, 2);
			}
		} catch (error) {
			Toast.info(error, 2);
		}
		Toast.close();
	};
	//领取任务
	getTask = () => {
		this.judgeMissionStatus();
		// const { data } = this.state;
		// if (data.applyStatus === "1") {
		//     this.judgeMissionStatus();
		// } else {
		//     this.openLimitVisible();
		// }
	};
	//查看任务领券
	goCouponCenter = () => {
		this.props.history.push({ pathname: "/checkCoupon" });
	};
	//任务modal
	taskModal = () => {
		this.setState({
			visible: !this.state.visible
		});
	};
	//判断任务状态  路径跳转
	judgeMissionStatus = () => {
		const { missionStatus } = this.state.data;
		const fn = this.changeMissionStatus[missionStatus];
		fn && fn();
	};

	//去完成
	complete = () => {
		this.goHome();
	};
	//去首页
	goHome = () => {
		this.props.history.push({
			pathname: "/walletHome",
			query: {
				from: "/walletHome"
			}
		});
	};
	//打开客服modal
	openService = () => {
		this.setState({
			serviceVisible: !this.state.serviceVisible
		});
	};

	openLimitVisible = () => {
		this.setState({
			limitVisible: !this.state.limitVisible
		});
	};
	//打电话
	call = async () => {
		try {
			await yhTools.callPhone(callPhoneData);
		} catch (error) {
			Toast.info(error);
		} finally {
			this.openService();
		}
	};
	goRule = () => {
		const { data = {} } = this.state;
		const { other } = data;
		this.props.history.push({
			pathname: "/newPersonCouponRule",
			state: { text: other }
		});
	};
	render() {
		const _pageParams = {
			header: {
				title: "“宝付”新人大礼包"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const { visible, serviceVisible, limitVisible, data = {} } = this.state;
		const {
			xhbCoupons = [],
			missionTitle,
			other,
			totalCouponValue,
			missionPrompt
		} = data;
		const Title = (
			<div className="new-person-coupon-award-bottom-left">
				<div>{missionTitle}</div>
				<div>
					<img src={icon1} /> {totalCouponValue} 元小辉付券包
				</div>
			</div>
		);
		return (
			<MainLayout pageParams={_pageParams} isScroll={true}>
				<div className="new-person-coupon">
					<div className="new-person-coupon-logo">
						<div className="logo">
							<img src={logo} alt="永辉金融" />
						</div>
						<div className="service">
							<a
								style={{ padding: 5 }}
								onClick={this.goRule}
								key={Math.random()}
							>
								规则
							</a>
							|
							<a
								key={Math.random()}
								style={{ padding: 5 }}
								onClick={this.openService}
							>
								客服
							</a>
						</div>
					</div>
					<span className="new-person-coupon-text">
						领{totalCouponValue}元小辉付券包
					</span>
					<div className="new-person-coupon-panel">
						<Panel title="做任务领奖励">
							{xhbCoupons.map(item => (
								<CouponItem key={item.activityCouponNo} data={item} />
							))}

							<div className="line"></div>
							<div
								className="new-person-coupon-award-bottom"
								key={Math.random()}
								onClick={this.getTask}
							>
								{Title}
								<div className="new-person-coupon-award-bottom-right">
									{couponStatus[data.missionStatus]}
								</div>
							</div>
							<div className="new-person-coupon-award-bottom-right-bottom">
								{" "}
								{missionPrompt}
							</div>
						</Panel>
						<Panel title="福利攻略">
							<div className="welfare">
								<div className="welfare-item">
									<div className="welfare-icon">
										<img src={icon2} />
									</div>
									<div>
										领取任务
										<br />
										开始赚钱
									</div>
								</div>
								<div className="welfare-item">
									<div className="welfare-icon">
										<img src={icon3} />
									</div>
									<div>
										首次转入
										<br />
										金额≥1千
									</div>
								</div>
								<div className="welfare-item">
									<div className="welfare-icon">
										<img src={icon4} />
									</div>
									<div>
										享受7天 <br />
										存款收益
									</div>
								</div>
								<div className="welfare-item">
									<div className="welfare-icon">
										<img src={icon5} />
									</div>
									<div>
										回到页面 <br />
										领取奖励
									</div>
								</div>
							</div>
						</Panel>
						<Panel title="课堂小知识">
							<Carousel>
								<div className="new-person-coupon-panel-carousel">
									<div className="new-person-coupon-panel-carousel-item">
										<span>Q</span>
										<p>小辉宝是什么？</p>
									</div>
									<div className="new-person-coupon-panel-carousel-item">
										<span>A</span>
										<p>
											小辉宝是永辉金融与华通银行合作为永辉消费者提供的专属银行存款产品，主要特点是本金保障、起存金额低、收益高、当日起息、存取灵活
										</p>
									</div>
								</div>
								<div className="new-person-coupon-panel-carousel">
									<div className="new-person-coupon-panel-carousel-item">
										<span>Q</span>
										<p>什么是银行存款产品？</p>
									</div>
									<div className="new-person-coupon-panel-carousel-item">
										<span>A</span>
										<p>
											银行存款产品是由商业银行发行的各种存款类资产，受中国银行保险监督管理委员会监管。起购门槛低，资产安全性高，收益稳健。
										</p>
									</div>
								</div>
								<div className="new-person-coupon-panel-carousel">
									<div className="new-person-coupon-panel-carousel-item">
										<span>Q</span>
										<p>小辉宝产品是否受银行存款保险保障？</p>
									</div>
									<div className="new-person-coupon-panel-carousel-item">
										<span>A</span>
										<p>
											每一笔小辉宝均对应一笔标准存款，标准存款完全按照国家监管要求执行存款保险条款。
										</p>
									</div>
								</div>
							</Carousel>
						</Panel>
						<div className="xhf-index-footer">
							<img src={xhf_foot} alt="" />
						</div>
					</div>
				</div>

				<Modal
					visible={visible}
					title={Title}
					transparent
					style={{ overflow: "hidden" }}
					footer={[
						{
							text: "我知道了",
							onPress: this.taskModal
						},
						{
							text: modalButton[data.missionStatus],
							onPress: this.complete
						}
					]}
				>
					<div className="modal-title">任务说明</div>
					<div
						className="modal-content"
						dangerouslySetInnerHTML={{ __html: other }}
					></div>
					<div className="modal-title">当前状态</div>
					<div className="modal-status">
						{/* {taskMsg[data.missionStatus]} */}
						已领取任务
					</div>
				</Modal>
				<Modal
					visible={serviceVisible}
					transparent
					footer={[
						{
							text: "取消",
							onPress: this.openService
						},
						{
							text: "呼叫",
							onPress: () => this.call()
						}
					]}
				>
					<div className="modal-content-text">400 690 6663</div>
				</Modal>
				<Modal
					visible={limitVisible}
					transparent
					footer={[
						{
							text: "我知道了",
							onPress: this.openLimitVisible
						}
					]}
				>
					<div className="modal-content-text">
						本活动仅针对小辉宝新用户开放，您暂不符合活动条件，请关注后续其它活动。
					</div>
				</Modal>
			</MainLayout>
		);
	}
}

export default connect(null, dispatch => ({
	saveNewPersonCoupon: value => dispatch(saveNewPersonCoupon(value))
}))(NewPersonCoupon);
